<template>
  <div class="statistical-bar">
    <div id="loadExecutionChart" ref="chartRef" :style="{ width: '100%', height: '180px' }"></div>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref<HTMLElement | null>(null);
let myChart: echarts.ECharts | null = null;
let resizeHandler: () => void;

// 获取模拟数据
const getMockLoadExecutionData = () => {
  // 模拟运用负载统计数据
  return {
    categories: ['半年', '四期', '整期', '短程'],
    series: [
      {
        name: '计划',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: [4, 5, 3, 3],
        itemStyle: {
          color: '#409eff'
        }
      },
      {
        name: '执行',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: [0, 2, 0, 0],
        itemStyle: {
          color: '#ff9800'
        }
      }
    ]
  };
};

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;

  try {
    myChart = echarts.init(chartRef.value);
    const mockData = getMockLoadExecutionData();

    const option = {
      title: {
        text: '运用负载统计执行情况',
        left: 'center',
        textStyle: {
          fontSize: 14,
          fontWeight: 'bold',
          color: '#333'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        borderColor: '#409eff',
        textStyle: {
          color: '#fff'
        }
      },
      legend: {
        data: ['计划', '执行'],
        bottom: 0,
        textStyle: {
          color: '#666',
          fontSize: 12
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        top: '20%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: mockData.categories,
        axisLine: {
          lineStyle: {
            color: '#dcdfe6'
          }
        },
        axisLabel: {
          color: '#606266',
          fontSize: 12
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: '#f0f2f5',
            type: 'dashed'
          }
        },
        axisLabel: {
          color: '#606266',
          fontSize: 12
        }
      },
      series: mockData.series
    };

    myChart.setOption(option);

    // 添加窗口大小改变时的响应
    resizeHandler = () => {
      myChart?.resize();
    };
    window.addEventListener('resize', resizeHandler);

  } catch (error) {
    console.error('初始化运用负载统计执行情况图失败:', error);
  }
};

onMounted(() => {
  initChart();
});

onUnmounted(() => {
  // 清理资源
  if (resizeHandler) {
    window.removeEventListener('resize', resizeHandler);
  }
  myChart?.dispose();
  myChart = null;
});
</script>

<style lang='scss' scoped>
.statistical-bar {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
  padding: 10px;
}
</style>